import { Component, PropTypes } from '@didi/teddy-immutable'
import SelPanelItem from '../sel-panel-item/sel-panel-item'
import tool from '../../common/tool'
const { func, array, string } = PropTypes

let computedIndex
const {
  makeid
} = tool
const noop = () => {}
class SelPanel extends Component {
  static propTypes = {
    selKey: string,
    selVal: string,
    items: array,
    onSel: func,
    closeSelPanel: func
  }

  static defaultProps = {
    selKey: 'id',
    selVal: '',
    items: [],
    onSel: noop,
    closeSelPanel: noop
  }

  state = {
    items: []
  }

  children() {
    return {
      listItems: this.state.items.asMutable({deep:true}).map((item, index) => {
        return {
          component: SelPanelItem,
          key: item.id || makeid(),
          props: {
            index,
            id: item.id,
            text: item.text,
            items: item.items || [],
            originIndex: item.originIndex,
            selected: item.selected,
            onSel: item.onSel
          }
        }
      })
    }
  }

  normalizeItems(selIndex, childIndex) {
    const state = this.state
    const items = this.props.items
    const stateItems = []
    const selectedIndex = selIndex
    const selectedItem= items[selectedIndex]
    const childItems = selectedItem.items
    items.forEach((item, index) => {
      const temp = {
        id: item.id,
        text: item.text,
        onSel: this.onSel.bind(this),
        selected: false
      }
      if (selectedIndex == index) {
        temp.selected = true
      }
      stateItems.push(temp)
    })
    if (childItems) {
      console.log('看下 childindex', childIndex)
      const selectedChildIndex = childIndex !== undefined ? childIndex : -1
      const childTempItems = []
      childItems.forEach((item, index) => {
        const temp = {
          ...item,
          selected: false
        }
        if (selectedChildIndex == index) {
          temp.selected = true
        }
        childTempItems.push(temp)
      })
      const insertIndex = (3 - selectedIndex % 4) + selectedIndex
      stateItems[insertIndex].items = childTempItems
      stateItems[insertIndex].originIndex = selectedIndex
    }
    this.setState({
      items: stateItems
    })
  }

  getSelectedIndex() {
    const props = this.props
    const propsItems = props.items
    const propsKey = props.selKey
    const propsVal = props.selVal
    for (let i = 0; i < propsItems.length; i++) {
      const item = propsItems[i]
      if (item[propsKey]) {
        if (item[propsKey] === propsVal) {
          return {
            selIndex: i,
            selChildIndex: -1
          }
        }
      } else if (item.items) {
        const childItems = item.items
        for (let j = 0; j < childItems.length; j++) {
          const childItem = childItems[j]
          if (childItem[propsKey] === propsVal) {
            return {
              selIndex: i,
              selChildIndex: j
            }
          }
        }
      }
    }
    return {
      selIndex: 0,
      selChildIndex: -1
    }
  }

  onSel(index, childIndex) {
    let item = this.props.items[index]
    const itemText = item.text
    if (childIndex !== undefined) {
      item = { ...item.items[childIndex] }
      item.text = `${itemText}${item.text}`
    }
    this.normalizeItems(index, childIndex)
    if (item.items && childIndex === undefined) {
      return
    }
    this.props.onSel(item)
  }

  closeSelPanel() {
    this.props.closeSelPanel()
  }

  onLoad() {
    computedIndex = this.getSelectedIndex()
    this.normalizeItems(computedIndex.selIndex, computedIndex.selChildIndex)
  }
}

export default SelPanel